<template>
  <Card style="width: 100%" title="项目过程">
    <Form
      name="user"
      ref="formRef"
      :labelCol="labelCol"
      :wrapperCol="wrapperCol"
      @finish="formFinish"
      :initialValues="{}">

      <Row>
        <Col :span="8">
          <FormItem name="resourceName" label="资源名称" initialValue="">
            <Input placeholder="请输入资源名称" style="width: 100%" allowClear/>
          </FormItem>
        </Col>
        <Col :span="8">
          <FormItem name="resourceType" label="资源类型" initialValue="" all>
            <Select placeholder="资源类型" style="width: 100%" allowClear>
              <Option v-for="dict in dict.type.resource_type" :key="dict.value" :label="dict.label" :value="dict.value"></Option>
            </Select>
          </FormItem>
        </Col>
        <Col :span="8">
          <FormItem name="fatoryName" label="厂商名称" initialValue="">
            <Input placeholder="请输入用例代码" style="width: 100%" allowClear/>
          </FormItem>
        </Col>
      </Row>
      <Row>
         <Col :span="8">
          <FormItem name="ipAddress" label="IP地址">
            <Input placeholder="请输入IP地址" style="width: 100%" allowClear />
          </FormItem>
        </Col>
        <Col :span="5" :offset="11">
          <Button type="primary" @click="handleQuery">
            <Icon name="search" style="margin-top: 3px; margin-right: 5px;" /> 查 询
          </Button>
          <Button style="margin-left: 10px" @click="formReset">
            <Icon name="rollback-outline" style="margin-top: 3px; margin-right: 5px;" /> 重 置
          </Button>
          <!-- <a href="#" style="color: #b30000">更多 <Icon name="down" style="vertical-align: middle" /></a> -->
        </Col>
      </Row>
    </Form>

    <!-- 分割线 -->
    <Divider />

    <Button type="primary" style="margin-right: 10px; margin-bottom: 20px" size="md" @click="clickAdd">
      <Icon name="add" /> 新增
    </Button>
    
    <Skeleton
      :loading="loading"
      :avatar="false"
      active
      :paragraph="{ rows: 6 }">

      <Table
        :columns="columns"
        :dataSource="dataList"
        :bordered="false"
        @change="handleTableChange"
        :pagination="{
          total: total,
          showQuickJumper: true,
          showSizeChanger: true,
          pageSize: queryParams.pageSize,
          current: queryParams.pageNum,
        }">

        <template #render="render">
          <div v-if="render.dataIndex == 'resourceType'">
          <dict-tag :options="dict.type.resource_type" :value="render.record.resourceType"/>
          </div>
          <div v-else-if="render.dataIndex == 'operation'">
            <a href="#" @click.prevent="tblOptForm(render.record)">
              <Icon name="edit" style="margin-top: 4px;" /> 编辑
            </a>
            <span> | </span>
            <a href="#" @click.prevent="deleteClick(render.record.resourceId)">
              <Icon name="delete-can" style="margin-top: 4px;" /> 删除
            </a>
          </div>
        </template>
        <template #paginationTotal="props">
          <span>总共{{ props.total }} 条</span>
        </template>
      </Table>
    </Skeleton>

     <!-- 表单页对话框 -->
    <Modal
      class="fromModal"
      v-if="formDialogInfo.visible"
      :title="formDialogInfo.title"
      v-model="formDialogInfo.visible"
      @cancel="formDialogInfo.visible = false"
      width="800px"
      :bodyStyle="{ padding: '0px' }"
      :footer="[null]">

      <modal-form  :key="Date.now()" :id="formDialogInfo.id" :currentRow="formDialogInfo.currentRow"  @handleCancel="formDialogCancel"></modal-form>
    </Modal>
  </Card>
</template>

<script>
import { listResource, getResource, delResource, addResource, updateResource } from "@/api/lampstand/resource";
import {getCurrentTime} from "@/utils/ruoyi";
import ModalForm from "./components/ModalFormStand";
import { Message, Modal } from "@uni/vue";
export default {
  dicts: ['resource_type'],
  components: {
    "modal-form": ModalForm,
  },
  data() {
    return {
      loading: true,
      labelCol: { span: 6 },
      wrapperCol: { span: 16 },
      dataList: [],
      columns: [
        { title: "序号", align: "center", dataIndex: "resourceId", key: "resourceId" },
        { title: "资源编号", align: "center", dataIndex: "resourceNumber", key: "resourceNumber" },
        { title: "资源名称", align: "center", dataIndex: "resourceName", key: "resourceName" },
        { title: "资源类型", align: "center", dataIndex: "resourceType", key: "resourceType" },
        { title: "厂家名称", align: "center", dataIndex: "fatoryName", key: "fatoryName" },
        { title: "iP地址", align: "center", dataIndex: "ipAddress", key: "ipAddress" },
        { title: "是否使用中", align: "center", dataIndex: "address", key: "address" },
        { title: "备注", align: "center", dataIndex: "remark", key: "remark" },
        { title: "操作", align: "center", dataIndex: "operation", key: "operation" },
      ],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 5,
        resourceName: null,
        resourceType: null,
        fatoryName: null,
        ipAddress: null
      },
      total: 0,
      formDialogInfo: {
        title: "",
        visible: false,
        id: "",
        currentRow: {},
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    async clickAdd() {
      (
        this.formDialogInfo = {
          title: "添加硬件资源",
          visible: false,
          id: "",
          currentRow: {},
        }
      ),
      (this.formDialogInfo.visible = true);
    },
    tblOptForm(row) {
      this.formDialogInfo.title = "修改硬件资源";
      this.formDialogInfo.id = row.resourceId;
      this.formDialogInfo.currentRow = row;
      this.formDialogInfo.visible = true;
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.$refs.formRef.submit();
    },
    formFinish(formValues) {
      this.queryParams = {
        pageNum: 1,
        pageSize: 5,
        resourceName: formValues.resourceName,
        resourceType: formValues.resourceType,
        fatoryName: formValues.fatoryName,
        ipAddress: formValues.ipAddress,
      };
      this.getList();
    },
    /** 查询列表 */
    getList() {
      this.loading = true;
      listResource(this.queryParams).then((response) => {
        if (response.code == 200) {
          this.dataList = response.rows;
          this.total = response.total;
          this.loading = false;
        } else {
          Message.error({ text: "获取信息失败：" + response.msg });
        }
      });
    },
    handleTableChange(p, filters) {
      const { current, pageSize } = p;
      this.queryParams.pageNum = current;
      this.queryParams.pageSize = pageSize;
      this.getList();
    },
    formReset(value) {
      this.$refs.formRef.reset();
    },
    formDialogCancel() {
      this.formDialogInfo.visible = false;
      this.getList()
    },
    // 角色状态修改
    handleStatusChange(row) {
      let text = row.status === "0" ? "停用" : "启用";
      Modal.confirm({
        title: "改变状态？",
        content: '确认要"' + text + '""' + row.userName + '"用户吗？',
        onOk: () => {
          row.status = row.status === "0" ? "1" : "0";
          changeUserStatus(row.userId, row.status)
            .then(() => {
              Message.success({ text: text + "成功" });
              this.getList();
            })
            .catch(function () {
              row.status = row.status === "0" ? "1" : "0";
            });
        },
        onCancel: () => {},
      });
    },
    /** 删除按钮操作 */
    deleteClick(id) {
      Modal.confirm({
        title: "确认删除？",
        content: '是否确认删除硬件资源编号为"' + id + '"的数据项？',
        onOk: () => {
          delResource(id).then(() => {
            this.getList();
            Message.success({ text: "删除成功" });
          });
        },
        onCancel: () => {},
      });
    },
  },
};
</script>

<style scoped lang="scss">
/* 弹框区 */
::v-deep
  .fromModal
  > .uni-modal-wrap
  > .uni-modal-wrap-content
  > .uni-modal-footer {
  padding: 0;
}
</style>
